<template>
  <!--    走马灯  -->
  <div class="carouselContainer">
    <div>
      <el-carousel height="530px">
        <el-carousel-item v-for="item in carouselImg" :key="item.id">
          <img :src="item.url"/>
        </el-carousel-item>
      </el-carousel>
      <!--            右边菜单栏-->
      <div class="carouselMenu">
        <div class="carouselMenuItemTop" style="height: 50px;color:#fff;background-color: rgba(51,51,51,0.8);">
          <span style="font-size: 16px;line-height: 50px;">全部...</span>
        </div>
        <div
            @mouseenter="carouselMenuEnterHandler"
            @mouseleave="carouselMenuLeaveHandler"
            v-for="menu in rightMenu"
            :key="menu.id"
            class="carouselMenuItem">
          <span>{{menu.title}}</span>
        </div>
      </div>
      <!--            菜单栏对应的内容-->
      <div class="carouseMenuContent" v-show="carouseMenuContentVis">

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//走马灯的图片
import {ref} from "vue";

const carouselImg = ref([
  {
    id: 1,
    url: "https://p3.ssl.qhimg.com/t01abccb6e61121e3ba.webp",
  },
  {
    id: 2,
    url: "https://p4.ssl.qhimg.com/t01e979f3d96c14e2e6.webp"
  },
  {
    id: 3,
    url: "https://p2.ssl.qhimg.com/t01dd40f22c978ffb2c.webp"
  },
  {
    id: 4,
    url: "https://p0.ssl.qhimg.com/t01ac67203217e1c434.webp"
  }
]);
//右边菜单
const rightMenu = ref([
  {
    id: 1,
    title: '家庭安防'
  },
  {
    id: 2,
    title: '安全路由'
  },
  {
    id: 3,
    title: '智能手表'
  },
  {
    id: 4,
    title: '汽车用品'
  },
  {
    id: 5,
    title: '扫地机器人'
  }
]);
//右边菜单内容显示
const carouseMenuContentVis = ref(false);

// 鼠标进入菜单栏的时候
const carouselMenuEnterHandler = () => {
  carouseMenuContentVis.value = true;
}
// 鼠标退出菜单栏的时候
const carouselMenuLeaveHandler = () => {
  carouseMenuContentVis.value = false;
}
</script>

<style scoped>
.carouselContainer{
  width: 100%;
  height: 530px;
  display: flex;
  justify-content: center;
}
.carouselContainer>div{
  height: 100%;
  width: 1260px;
  position: relative;
}
.carouselMenu{
  position: absolute;
  width: 230px;
  height: 100%;
  top: 0;
  background-color: rgba(51,51,51,0.7);
}
.carouselMenuItem{
  height: 48px;
  width: 100%;
  text-align: center;
}
.carouselMenuItemTop{
  height: 48px;
  width: 100%;
  text-align: center;
}
.carouselMenuItem>span{
  font-size: 16px;
  line-height: 50px;
  color: #fff
}
.carouselMenuItem:hover{
  background-color: rgba(51,51,51,0.8);
  cursor: pointer;
}
.carouseMenuContent{
  width: 800px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 230px;
  box-shadow: 0px 0px 10px 10px #e3e3e3;
}
</style>
